'use strict'

const path = require('path')
const webpack = require('webpack')
var autoprefixer = require('autoprefixer')
var precss = require('precss')
var pxtorem = require('postcss-pxtorem')

const TARGET = process.env.npm_lifecycle_event
process.env.BABEL_ENV = TARGET

module.exports = {
  entry: ['babel-polyfill', './app/index.js'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'eval-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    hot: true,
    inline: true,
    // Display only errors to reduce the amount of output.
    stats: 'errors-only',
    host: '0.0.0.0',
    port: 8088,
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer({
            browsers: '> 2%'
          }),
          precss,
          pxtorem({
            rootValue: 100,
            propWhiteList: [],
          })
        ]
      }
    })
  ],
  resolve: {
    extensions: ['.web.js', '.js', '.json', '.jsx', '.css', '.less'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'app'),
        ],
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules!postcss-loader',
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!postcss-loader?parser=postcss-less!less-loader',
      },
    ]
  },
}